import styled from 'styled-components'
export const ArtistInfoWrapper = styled.div`
  .title{
    font-size:24px;
    color:#333;
    font-weight:400;
    padding:5px 0;
  }
  img{
    width:640px;
    height:300px;
  }
`
export const TabsWrapper = styled.div`
  .tabs{
    display:flex;
    width:640px;
    height:42px;
    line-height:42px;
    border:1px solid #ccc;
    border-top:none;
    border-bottom:none;
  }
  .content{
    margin-top:20px;
  }
`
export const ItemWrapper = styled.div`
  cursor:pointer;
  font-size:14px;
  color:#333;
  text-align:center;
  width:25%;
  border-bottom:${props => props.isActive ? 'none' : '1px solid #ccc'}; 
  border-right:${props => props.isActive ? '1px solid #ccc' : 'none'};
  border-left:${props => props.isActive ? '1px solid #ccc' : 'none'};
  border-top:${props => props.isActive ? '2px solid red' : 'none'};
  &:first-child{
    border-left:none;
  }
  &:last-child{
    border-right:none;
  }
`
export const HotWorkWrapper = styled.div`

`
export const AlbumWrapper = styled.div`
`
export const MvWrapper = styled.div`
`
export const IntroduceWrapper = styled.div`

`